<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>

<body>

    <div id="box">


    </div>


    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">

        // 定义一个类组件
        class Book extends React.Component{
            constructor(){
                super();
                // 定义状态：在state属性里
                this.state = {
                    author : "柴正盼",
                    price :21.5,
                    address:{
                        country:"中国",
                        province:"陕西",
                        city:"西安",
                        street:"南窑头国际"
                    }
                }                
            }

            changePrice=()=>{
                // 修改状态：使用setState
                this.setState({
                    price:this.state.price+1
                });             
            }

            changeAddress=()=>{
                this.setState({
                    address:{
                        ...this.state.address,
                        street:"南窑头国际88排"
                    }
                })
            }

            render(){
                return (
                    <div>
                        <p>名字：{this.props.name}</p>
                        <p>作者：{this.state.author}</p>
                        <p>价格：{this.state.price}</p>
                        <input type="button" value="修改价格" onClick={this.changePrice} />
                        <p>地址：{this.state.address.street}</p>
                        <input type="button" value="修改地址" onClick={this.changeAddress} />
                    </div>
                )
            }

        }

        

        const root = (<div>
            <h1>组件：</h1>
            <Book name="如何让富婆爱上我"  />
        </div>
        );

        ReactDOM.render(root, document.getElementById("box"));


    </script>
</body>

</html>